import React, { useState, useEffect } from 'react'
import EChartsComponent from './EchartsComponent.js';
import ECharts from './Echarts.js';
import { Image } from 'antd';
import { UserOutlined, ToolOutlined, HomeOutlined, VideoCameraOutlined, MacCommandOutlined, UserSwitchOutlined, FireFilled } from '@ant-design/icons';
import axios from 'axios';


const Home = () => {
    const [data1, setData1] = useState()
    const [data2, setData2] = useState()
    const [data3, setData3] = useState()
    const [data4, setData4] = useState()
    const [data5, setData5] = useState()
    const [data6, setData6] = useState()
    const [src1, setSrc1] = useState()
    const [src2, setSrc2] = useState()
    const [src3, setSrc3] = useState()
    const [text1, setText1] = useState()
    const [text2, setText2] = useState()
    const [text3, setText3] = useState()
    const [worksdata, setWorksdata] = useState([])


    useEffect(() => {
        axios.get('http://localhost:1234/works/data1')
            .then(res => {
                setData1(res.length)
            })

        axios.get('http://localhost:1234/works/data2')
            .then(res => {
                setData2(res.length)
            })

        axios.get('http://localhost:1234/works/data3')
            .then(res => {
                setData3(res.length)
            })

        axios.get('http://localhost:1234/works/data4')
            .then(res => {
                setData4(res.length)
            })

        axios.get('http://localhost:1234/works/data5')
            .then(res => {
                setData5(res.length)
            })

        axios.get('http://localhost:1234/works/data6')
            .then(res => {
                setData6(res.length)
            })

        axios.get('http://localhost:1234/works/hotdata')
            .then(res => {
                setSrc1(`http://localhost:1234/works/image?perface=public/images/${res[0].perface}`)
                setSrc2(`http://localhost:1234/works/image?perface=public/images/${res[1].perface}`)
                setSrc3(`http://localhost:1234/works/image?perface=public/images/${res[2].perface}`)
                setText1(res[0].name)
                setText2(res[1].name)
                setText3(res[2].name)
            })

        axios.get('http://localhost:1234/works/worksdata')
            .then(res => {
                setWorksdata(res)
            })
    }, [])

    return (
        <div style={{ display: 'flex' }}>
            <div>
                <div>
                    <div style={{ display: 'flex' }}>
                        <div style={{
                            width: '200px',
                            height: '100px',
                            border: '1px solid #ccc',
                            margin: '0 10px 10px 0',
                            display: 'flex',
                            borderRadius: '5px',
                            boxShadow: '2px 2px #ccc'
                        }}>
                            <div style={{ display: 'flex', margin: '30px 0 0 30px' }}>
                                <VideoCameraOutlined style={{
                                    fontSize: '40px',
                                    color: 'rgb(22, 119, 255)',
                                    marginRight: '10px'
                                }} />
                                <div>
                                    <div>素材数量</div>
                                    <div style={{ fontSize: '25px', marginTop: '5px' }}>{data1}</div>
                                </div>
                            </div>
                        </div>
                        <div style={{
                            width: '200px',
                            height: '100px',
                            border: '1px solid #ccc',
                            margin: '0 10px 10px 0',
                            display: 'flex',
                            borderRadius: '5px',
                            boxShadow: '2px 2px #ccc'
                        }}>
                            <div style={{ display: 'flex', margin: '30px 0 0 30px' }}>
                                <VideoCameraOutlined style={{
                                    fontSize: '40px',
                                    color: 'rgb(22, 119, 255)',
                                    marginRight: '10px'
                                }} />
                                <div>
                                    <div>用户数量</div>
                                    <div style={{ fontSize: '25px', marginTop: '5px' }}>{data2}</div>
                                </div>
                            </div>
                        </div>
                        <div style={{
                            width: '200px',
                            height: '100px',
                            border: '1px solid #ccc',
                            margin: '0 10px 10px 0',
                            display: 'flex',
                            borderRadius: '5px',
                            boxShadow: '2px 2px #ccc'
                        }}>
                            <div style={{ display: 'flex', margin: '30px 0 0 30px' }}>
                                <VideoCameraOutlined style={{
                                    fontSize: '40px',
                                    color: 'rgb(22, 119, 255)',
                                    marginRight: '10px'
                                }} />
                                <div>
                                    <div>论坛数量</div>
                                    <div style={{ fontSize: '25px', marginTop: '5px' }}>{data3}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style={{ display: 'flex' }}>
                        <div style={{
                            width: '200px',
                            height: '100px',
                            border: '1px solid #ccc',
                            margin: '0 10px 10px 0',
                            display: 'flex',
                            borderRadius: '5px',
                            boxShadow: '2px 2px #ccc'
                        }}>
                            <div style={{ display: 'flex', margin: '30px 0 0 30px' }}>
                                <VideoCameraOutlined style={{
                                    fontSize: '40px',
                                    color: 'rgb(22, 119, 255)',
                                    marginRight: '10px'
                                }} />
                                <div>
                                    <div>图片数量</div>
                                    <div style={{ fontSize: '25px', marginTop: '5px' }}>{data4}</div>
                                </div>
                            </div>
                        </div>
                        <div style={{
                            width: '200px',
                            height: '100px',
                            border: '1px solid #ccc',
                            margin: '0 10px 10px 0',
                            display: 'flex',
                            borderRadius: '5px',
                            boxShadow: '2px 2px #ccc'
                        }}>
                            <div style={{ display: 'flex', margin: '30px 0 0 30px' }}>
                                <VideoCameraOutlined style={{
                                    fontSize: '40px',
                                    color: 'rgb(22, 119, 255)',
                                    marginRight: '10px'
                                }} />
                                <div>
                                    <div>视频数量</div>
                                    <div style={{ fontSize: '25px', marginTop: '5px' }}>{data5}</div>
                                </div>
                            </div>
                        </div>
                        <div style={{
                            width: '200px',
                            height: '100px',
                            border: '1px solid #ccc',
                            margin: '0 10px 10px 0',
                            display: 'flex',
                            borderRadius: '5px',
                            boxShadow: '2px 2px #ccc'
                        }}>
                            <div style={{ display: 'flex', margin: '30px 0 0 30px' }}>
                                <VideoCameraOutlined style={{
                                    fontSize: '40px',
                                    color: 'rgb(22, 119, 255)',
                                    marginRight: '10px'
                                }} />
                                <div>
                                    <div>评论数量</div>
                                    <div style={{ fontSize: '25px', marginTop: '5px' }}>{data6}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div style={{
                        border: '1px solid #ccc',
                        width: '620px',
                        height: '200px',
                        boxShadow: '2px 2px #ccc'
                    }}>
                        <div style={{ fontSize: '20px', marginLeft: '20px' }}>热门素材展示</div>
                        <div style={{ display: 'flex' }}>
                            <div style={{
                                width: '170px',
                                height: '150px',
                                border: '1px solid #ccc',
                                margin: '10px 10px 10px 20px',
                                boxShadow: '2px 2px #ccc'
                            }}>
                                <Image
                                    src={src1}
                                />
                                <div style={{ fontSize: '20px', margin: '10px 0 0 20px' }}>{text1}</div>
                            </div>
                            <div style={{
                                width: '170px',
                                height: '150px',
                                border: '1px solid #ccc',
                                margin: '10px 10px 10px 20px',
                                boxShadow: '2px 2px #ccc'
                            }}>
                                <Image
                                    src={src2}
                                />
                                <div style={{ fontSize: '20px', margin: '10px 0 0 20px' }}>{text2}</div>
                            </div>
                            <div style={{
                                width: '170px',
                                height: '150px',
                                border: '1px solid #ccc',
                                margin: '10px 10px 10px 20px',
                                boxShadow: '2px 2px #ccc'
                            }}>
                                <Image
                                    src={src3}
                                />
                                <div style={{ fontSize: '20px', margin: '10px 0 0 20px' }}>{text3}</div>
                            </div>
                        </div>
                    </div>
                    <div style={{ display: 'flex' }}>
                        <div style={{
                            border: '1px solid #ccc',
                            width: '290px',
                            height: '200px',
                            margin: '10px 20px 0 0',
                            boxShadow: '2px 2px #ccc'
                        }}>
                            <EChartsComponent />
                        </div>
                        <div style={{
                            border: '1px solid #ccc',
                            width: '290px',
                            height: '200px',
                            margin: '10px 0 0 20px',
                            boxShadow: '2px 2px #ccc'
                        }}>
                            <ECharts />
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div style={{ display: 'flex' }}>
                    <div style={{
                        width: '200px',
                        height: '100px',
                        border: '1px solid #ccc',
                        borderRadius: '5px',
                        marginRight: '10px',
                        boxShadow: '2px 2px #ccc',
                        padding: '25px 0 0 20px'
                    }}
                        onClick={() => { window.location.pathname = '/forum'; }}
                    >
                        <MacCommandOutlined style={{ fontSize: '50px', color: 'rgb(22, 119, 255)' }} />
                        <span style={{ fontSize: '30px' }}>论坛管理</span>
                    </div>
                    <div style={{
                        width: '200px',
                        height: '100px',
                        border: '1px solid #ccc',
                        borderRadius: '5px',
                        marginLeft: '10px',
                        boxShadow: '2px 2px #ccc',
                        padding: '25px 0 0 20px'
                    }}
                        onClick={() => { window.location.pathname = '/material'; }}
                    >
                        <VideoCameraOutlined style={{ fontSize: '50px', color: 'rgb(22, 119, 255)' }} />
                        <span style={{ fontSize: '30px' }}>素材管理</span>
                    </div>
                </div>
                <div style={{
                    width: '420px',
                    height: '100px',
                    border: '1px solid #ccc',
                    borderRadius: '5px',
                    boxShadow: '2px 2px #ccc',
                    marginTop: '10px',
                    display: 'flex'
                }}>
                    <div style={{
                        width: '120px',
                        height: '80px',
                        borderRight: '1px solid #ccc',
                        margin: '10px 0 0 30px',
                        padding: '10px 0 0 35px'
                    }}
                        onClick={() => { window.location.pathname = '/user'; }}
                    >
                        <UserOutlined style={{ fontSize: '50px', color: 'rgb(22, 119, 255)' }} />
                        <div>用户管理</div>
                    </div>
                    <div style={{
                        width: '120px',
                        height: '80px',
                        borderRight: '1px solid #ccc',
                        margin: '10px 0 0 0',
                        padding: '10px 0 0 35px'
                    }}
                        onClick={() => { window.location.pathname = '/manager'; }}
                    >
                        <UserSwitchOutlined style={{ fontSize: '50px', color: 'rgb(22, 119, 255)' }} />
                        <div style={{ marginLeft: '-10px' }}>管理员管理</div>
                    </div>
                    <div style={{
                        width: '120px',
                        height: '80px',
                        // border: '1px solid #ccc',
                        margin: '10px 0 0 0',
                        padding: '10px 0 0 35px'
                    }}
                        onClick={() => { window.location.pathname = '/feedback'; }}
                    >
                        <ToolOutlined style={{ fontSize: '50px', color: 'rgb(22, 119, 255)' }} />
                        <div>用户反馈</div>
                    </div>
                </div>
                <div style={{
                    width: '420px',
                    height: '200px',
                    marginTop: '10px',
                    border: '1px solid #ccc',
                    borderRadius: '5px',
                    boxShadow: '2px 2px #ccc'
                }}>
                    <div style={{fontSize: '30px'}}>热门论坛</div>
                    {
                        worksdata.map((item, index) => {
                            while (index < 3) {
                                return (
                                    <div style={{width: '300px', height: '35px', border: '1px solid #ccc', margin: '10px 0 0 30px', display: 'flex'}}>
                                        <div style={{lineHeight: '35px', marginLeft: '30px', width: '230px'}}>{item.title}</div>
                                        <div style={{lineHeight: '35px'}}><FireFilled style={{color: '#eb2f96'}} />{item.likenum}</div>
                                    </div>
                                )
                            }
                        })
                    }
                </div>
                <div style={{
                    width: '420px',
                    height: '200px',
                    marginTop: '10px',
                    border: '1px solid #ccc',
                    borderRadius: '5px',
                    boxShadow: '2px 2px #ccc'
                }}>
                    <div style={{fontSize: '30px'}}>待审核论坛</div>
                    {
                        worksdata.map((item, index) => {
                            let i = 0
                            while (item.audit == false && i < 3) {
                                i++
                                return (
                                    <div style={{width: '300px', height: '35px', border: '1px solid #ccc', margin: '10px 0 0 30px', display: 'flex'}}>
                                        <div style={{lineHeight: '35px', marginLeft: '30px', width: '180px'}}>{item.title}</div>
                                        <div style={{lineHeight: '35px'}}>{item.date.split('T')[0]}</div>
                                    </div>
                                )
                            }
                        })
                    }
                </div>
            </div>
        </div>
    );
};
export default Home